// Capturando os elementos das abas e conteúdos
const abas = document.querySelectorAll('.aba');
const conteudos = document.querySelectorAll('.conteudo');

// Adicionando evento de clique para cada aba
abas.forEach((aba, index) => {
    aba.addEventListener('click', () => {
        // Removendo a classe 'ativa' de todas as abas e conteúdos
        abas.forEach((item) => item.classList.remove('ativa'));
        conteudos.forEach((item) => item.classList.remove('ativo'));

        // Adicionando a classe 'ativa' apenas para a aba clicada e seu respectivo conteúdo
        const alvo = aba.getAttribute('data-target');
        const conteudoAlvo = document.querySelector(`.${alvo}`);
        aba.classList.add('ativa');
        conteudoAlvo.classList.add('ativo');

        // Salvando o número da aba
        var numeroAba = index + 1;

        switch (numeroAba) {
            case 1:
                    $('#largura').focus();
              break;
            case 2:
                    $('#buscaMarcaModelo').focus();
              break;
            case 3:
                    $('#placa').focus();
                break;
            default:
                //console.log('Aba não encontrada.');
          }

        $('.form').each(function () {
            this.reset();
        });

        $('.listagem_retorno').hide();
        $('.secao_carro').hide();
        $('#formNaoEncontrado').hide();
    });
});

function buscaMarcas() {
    $.ajax({
        url: pluginUrl + '/plugin-delinte/api/api_busca_marcas.php',
        type: "POST",
        dataType: "JSON",
        success: function (result) {
            var html = '<option value="">Selecione a marca</option>';

            $.each(result, function (i, v) {
                html += `<option value="${v.ManufacturerID}">${v.ManufacturerName}</option>`;
            })

            $('#buscaMarcaModelo').html(html);
        }
    });
}

function naoEncontrado() {
    $('#larguraMedida').val($('#larguraRetorno').html());
    $('#perfilMedida').val($('#alturaRetorno').html());
    $('#aroMedida').val($('#aroRetorno').html());

    $('.listagem_retorno').hide();
    $('#formNaoEncontrado').show();
    $('#nome').focus();
}

window.onload = function () {
    $(document).ajaxStart(function () {
        $.LoadingOverlay("show", {
            background: "rgba(0, 0, 0, 0.5)"
        });
    });
    $(document).ajaxStop(function () {
        $.LoadingOverlay("hide");
    });

    function HTMLProduto(titulo, link, image) {
        if (image == null) {
            image = pluginUrl + '/plugin-delinte/img/DS8-245-45-19-45°.webp';
        }

        return `<div class="product">
            <img src="${image}" alt="${titulo}">
            <h2>${titulo}</h2>
            <a href="${link}" class="saiba-mais-btn">Saiba Mais</a>
        </div>`;
    }

    function HTMLmedida(medidas, carro = null) {
        $('#larguraRetorno').html(medidas.largura);
        $('#alturaRetorno').html(medidas.perfil);
        $('#aroRetorno').html(medidas.aro);

        $('.secao_carro').show();
        $('.secao_carro .coluna01').show();

        if (carro != null) {
            $('#marcaCarro').html(carro.fabricante);
            $('#modeloCarro').html(carro.veiculo);
            $('#anoCarro').html(carro.ano_modelo);

            $('.secao_carro .coluna02').show();
        } else {
            $('.secao_carro .coluna02').hide();
        }
    }

    $(function () {
        $("#buscaPlaca").submit(function (e) {
            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/api_busca_placa.php',
                type: "POST",
                data: {
                    placa: $('#placa').val()
                },
                dataType: "JSON",
                success: function (result) {
                    if (result['medidas']) {
                        $('#fotoCarro').attr('src', result['imageCar']);
                        HTMLmedida(result['medidas'], result['carro']);
                    }

                    if (result['paginas'].length == 0) {
                        naoEncontrado();
                        return;
                    }

                    let html = '';
                    $.each(result['paginas'], function (i, v) {
                        html += HTMLProduto(v.title, v.link, v.image);
                    });

                    $('.listagem_retorno').show();
                    $('.listagem_retorno').html(html);
                }
            });
            e.preventDefault();
        });
    });

    $('#buscaMarcaModelo').change(function () {
        if ($(this).val() != '') {
            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/api_busca_modelos.php',
                type: "POST",
                data: {
                    marca: $(this).val()
                },
                dataType: "JSON",
                success: function (result) {
                    var html = '<option value="">Selecione o modelo</option>';

                    if (Object.keys(result).every(key => /^\d+$/.test(key))) {
                        $.each(result, function (i, v) {
                            let constTo = (v.ConstructedFrom != undefined && v.ConstructedFrom.toString() != '') ? v.ConstructedFrom.toString().split("/")[2] : '';
                            let constFrom = (v.ConstructedTo != undefined && v.ConstructedTo.toString() != '') ? v.ConstructedTo.toString().split("/")[2] : '';

                            html += `<option value="${v.ModelID}">${v.ModelName} - ${constTo} > ${constFrom}</option>`;
                        })
                    } else {
                        let constTo = (result.ConstructedFrom != undefined && result.ConstructedFrom.toString() != '') ? result.ConstructedFrom.toString().split("/")[2] : '';
                        let constFrom = (result.ConstructedTo != undefined && result.ConstructedTo.toString() != '') ? result.ConstructedTo.toString().split("/")[2] : '';

                        html += `<option value="${result.ModelID}">${result.ModelName} - ${constTo} > ${constFrom}</option>`;
                    }   
                                     
                    $('#buscaModeloVeiculo').html(html);
                }
            });
        }
    });

    $('#buscaModeloVeiculo').change(function () {
        if ($(this).val() != '') {
            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/api_busca_veiculos.php',
                type: "POST",
                data: {
                    modelo: $(this).val()
                },
                dataType: "JSON",
                success: function (result) {

                    var html = '<option value="">Selecione o veículo</option>';

                    if (Object.keys(result).every(key => /^\d+$/.test(key))) {
                        $.each(result, function (i, v) {
                            let constTo = (v.ConstructedFrom != undefined && v.ConstructedFrom.toString() != '') ? v.ConstructionFrom.toString().split("/")[2] : '';
                            let constFrom = (v.ConstructedTo != undefined && v.ConstructionTo.toString() != '') ? v.ConstructedTo.toString().split("/")[2] : '';

                            html += `<option value="${v.KType}">${v.CarName} - ${constTo} > ${constFrom}</option>`;
                        })

                    } else {
                        let constTo = (result.ConstructedFrom != undefined && result.ConstructedFrom.toString() != '') ? result.ConstructionFrom.toString().split("/")[2] : '';
                        let constFrom = (result.ConstructedTo != undefined && result.ConstructionTo.toString() != '') ? result.ConstructedTo.toString().split("/")[2] : '';

                        html += `<option value="${result.KType}">${result.ModelName} ${result.CarName} - ${constTo} > ${constFrom}</option>`;
                    }

                    $('#buscaVeiculo').html(html);
                }
            });
        }
    });

    $(function () {
        $("#buscaVeiculos").submit(function (e) {
            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/api_busca_veiculo_pneu.php',
                type: "POST",
                data: {
                    KType: $('#buscaVeiculo').val(),
                    marca: $("#buscaMarcaModelo").find(":selected").text(),
                    modelo: $("#buscaModeloVeiculo").find(":selected").text(),
                    veiculo: $("#buscaVeiculo").find(":selected").text()
                },
                dataType: "JSON",
                success: function (result) {
                    HTMLmedida(result['medidas']);

                    if (result['paginas'].length == 0) {
                        naoEncontrado();
                        return;
                    }

                    let html = '';
                    $.each(result['paginas'], function (i, v) {
                        html += HTMLProduto(v.title, v.link, v.image);
                    });

                    $('.listagem_retorno').show();
                    $('.listagem_retorno').html(html);
                }
            });
            e.preventDefault();
        });
    });

    $(function () {
        $("#buscaMedidas").submit(function (e) {
            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/api_busca_medidas.php',
                type: "POST",
                data: {
                    largura: $('#largura').val(),
                    perfil: $('#perfil').val(),
                    aro: $('#aro').val(),
                },
                dataType: "JSON",
                success: function (result) {
                    HTMLmedida(result['medidas']);

                    if (result['paginas'].length == 0) {
                        naoEncontrado();
                        return;
                    }

                    let html = '';
                    $.each(result['paginas'], function (i, v) {
                        html += HTMLProduto(v.title, v.link, v.image);
                    });

                    $('.listagem_retorno').show();
                    $('.listagem_retorno').html(html);
                }
            });
            e.preventDefault();
        });
    });

    $('#formMedidas').validator().on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            $.LoadingOverlay("hide");

        } else {
            $.LoadingOverlay("show");

            e.preventDefault();
            var dados = $('#formMedidas').serializeArray();

            $.ajax({
                url: pluginUrl + '/plugin-delinte/api/cadastra_active_campaign.php',
                type: "POST",
                data: dados,
                dataType: "JSON",
                success: function (response) {
                    $('body').LoadingOverlay("hide");

                    $('#formMedidas')[0].reset();
                    
                    //console.log(response);

                    // Exibe uma notificação de erro com a mensagem correspondente ao ocorrido
                    $.notify({
                        // Opções
                        message: response
                    }, {
                        // Configurações
                        type: 'success', // Tipo da notificação (success, info, warning, danger)
                        placement: {
                            from: "top", // Posição da notificação (top, bottom)
                            align: "right" // Alinhamento da notificação (left, center, right)
                        },
                        delay: 2000, // Tempo de exibição da notificação (em milissegundos)
                        animate: {
                            enter: 'animate__animated animate__fadeInDown', // Animação de entrada
                            exit: 'animate__animated animate__fadeOutUp' // Animação de saída
                        }
                    });
                    
                }
            });
        }
    });
};